<template>
    <div class="app_container">
      <ScreenSection1 :set-section-ref="setSectionRef" :sectionindex="sectionIndex" />
      <ScreenSection2 :set-section-ref="setSectionRef" :sectionindex="sectionIndex"/>
      <!-- <ScreenSection3 :set-section-ref="setSectionRef" :sectionindex="sectionIndex"/>
      <ScreenSection4 :set-section-ref="setSectionRef" :sectionindex="sectionIndex"/>
      <ScreenSection5 :set-section-ref="setSectionRef" :sectionindex="sectionIndex"/> -->
      <ScreenSection6 :set-section-ref="setSectionRef" :sectionindex="sectionIndex"/>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import { gsap } from 'gsap';
  import ScreenSection1 from '../showCasePages/ScreenSection1.vue';
  import ScreenSection2 from '../showCasePages/ScreenSection2.vue';
  // import ScreenSection3 from '../showCasePages/ScreenSection3.vue';
  // import ScreenSection4 from '../showCasePages/ScreenSection4.vue';
  // import ScreenSection5 from '../showCasePages/ScreenSection5.vue';
  import ScreenSection6 from '../showCasePages/ScreenSection6.vue';
  
  const sectionRefs = ref([]); // 存放每个分屏的refs
  let sectionIndex = ref(0)
  
  // 用于更新分屏refs数组
  const setSectionRef = (el) => {
    if (el) {
      sectionRefs.value.push(el);
    }
  };
  
  onMounted(() => {
    const observerOptions = {
      root: null, // 视口为观察区域
      threshold: 0.8, // 10% 可见性时触发
    };
  
    // IntersectionObserver 回调
    const observerCallback = (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const index = sectionRefs.value.findIndex((section) => section === entry.target);
  
          // 打印索引值
          console.log('当前可见分屏索引:', index);
          sectionIndex.value = index
          console.log('sectionIndex.value:', sectionIndex.value)
          // 使用 GSAP 平滑滚动到该分屏位置
          // gsap.to(window, {
          //   scrollTo: index * window.innerHeight,
          //   duration: 1,
          //   ease: 'power2.in',
          // });
        }
      });
    };
  
    // 创建 IntersectionObserver 实例
    const observer = new IntersectionObserver(observerCallback, observerOptions);
  
    // 观察每个分屏
    sectionRefs.value.forEach((section) => {
      if (section) {
        observer.observe(section);
        // console.log('开始观察分屏:', section);
      }
    });
  
    // 组件销毁时清除观察
    onUnmounted(() => {
      observer.disconnect();
    });
  });
  </script>
  
  <style scoped>
  .app_container {
    height: 100vh; /* 设置为视口高度 */
    overflow-y: scroll; /* 允许垂直滚动 */
    scroll-snap-type: y mandatory; /* 启用滚动吸附效果 */
  }
  
  .screen {
    height: 100vh; /* 设置每个分屏的高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start; /* 启用吸附对齐 */
  }
  </style>
  
  